<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<link rel="stylesheet" href="css/layui.css">
<script src="layui.js"></script>
<body>
  <div id="test1"></div>
  <script>
  layui.use('transfer', function(){
    var transfer = layui.transfer;
    var $=layui.$;
   //从后台获取数据
  $.post(
  "http://stuapi.ysdjypt.com/api/GetRolesByUserIdLayUI"
  ,{
    uid:"c8033529-c2f7-4b32-877f-06004f05f7fe",
    token:"99edc960-8dba-43cf-8af8-81c408a2cb6b"
  }
  ,function(res){
    var valueArr = new Array();//右侧列表数据集合
    for(var i = 0;i<res.data.length;i++){
    //console.log(res.data[i].Id);
    valueArr.push(res.data[i].Id);
    }
   //console.log(valueArr);
   $.post(
    "http://stuapi.ysdjypt.com/api/GetRolesAll"
    ,{
      token:"99edc960-8dba-43cf-8af8-81c408a2cb6b"
    },function(res){
     //console.log(res);
     //渲染
    transfer.render({
      elem: '#test1'  //绑定元素
      ,title:['系统角色','拥有角色']
      ,data:res
      ,value:valueArr//初始右侧数据
      ,id: 'demo1' //定义索引
      ,parseData: function(res){
    return {
      "value": res.Id //数据值
      ,"title": res.Name //数据标题
      ,"disabled": res.disabled  //是否禁用
      ,"checked": res.checked //是否选中
    }
  }
  ,onchange: function(data, index){
    console.log(data); //得到当前被穿梭的数据
    console.log(index); //如果数据来自左边，index 为 0，否则为 1
    if(index == 0){
    for(var i = 0;i<data.length;i++){
      $.post(
    "http://stuapi.ysdjypt.com/api/AddUserToRole"
    ,{
      uId:"c8033529-c2f7-4b32-877f-06004f05f7fe"
      ,rId:data[i].value
      ,token:"99edc960-8dba-43cf-8af8-81c408a2cb6b"
    },function(res){
    },'json'
  );
    } 
  }else{
    for(var i = 0;i<data.length;i++){
    $.post(
    "http://stuapi.ysdjypt.com/api/RemoveUserFromRole"
    ,{
      uId:"c8033529-c2f7-4b32-877f-06004f05f7fe"
      ,rId:data[i].value
      ,token:"99edc960-8dba-43cf-8af8-81c408a2cb6b"
    },function(res){
  
    },'json'
  );
  }
}
  }
    });
  },'json'
  );
    },'json'
   );
  });
  </script>
</body>
</html>